<template>
  <view class="authentication_container">
    <view class="form">
      <uni-forms :rules="rules" :modelValue="formData" label-width="80px" ref="form">
        <uni-forms-item label="姓名:" name="name">
          <uni-easyinput :inputBorder="false" type="text" v-model="formData.name" placeholder="请输入" :clearable="false" />
        </uni-forms-item>
        <uni-forms-item label="身份证号:" name="idCard">
          <uni-easyinput type="text" v-model="formData.idCard" placeholder="请输入" :inputBorder="false"
            :clearable="false" />
        </uni-forms-item>
        <uni-forms-item label="申请区域:" name="area">
          <uni-data-select :clear="false" v-model="formData.area" @change="change" :localdata="range"
            placeholder="区域选择"></uni-data-select>
        </uni-forms-item>
      </uni-forms>
      <view class="save_id_img">
        <view class="txt">上传照片</view>
        <view class="item">
          <view class="title">请上传本人证件照</view>
          <view class="img_1">
            <uni-file-picker file-extname="png,jpg,jpeg" v-model="idCard_img.imgUrl" @select="updataFile($event, 0)"
              limit="1"></uni-file-picker>
          </view>
        </view>
        <view class="item">
          <view class="title">请上传身份证正面照片</view>
          <view class="img_1"><uni-file-picker file-extname="png,jpg,jpeg" v-model="idCard_img.front"
              @select="updataFile($event, 1)" limit="1"></uni-file-picker></view>
        </view>
        <view class="item">
          <view class="title">请上传身份证背面照片</view>
          <view class="img_1"><uni-file-picker file-extname="png,jpg,jpeg" v-model="idCard_img.opposite"
              @select="updataFile($event, 2)" limit="1"></uni-file-picker></view>
        </view>
      </view>
    </view>
    <view class="footer">
      <checkbox-group name="isConfirm" @change="isConfirmFn">
        <label>
          <checkbox ref="checkbox" :checked="isChecked" color="#FFCC33" backgroundColor="#FFCC33"></checkbox>
        </label>
      </checkbox-group>

      <text>
        勾选即同意
        <text class="agreement">《用户申请认证维修员协议》</text>
      </text>
      <text class="btn" @click="submit">立即申请</text>
    </view>
  </view>
</template>

<script>
import { getAllAreaAPI, auditSubAPI } from '@/api/authenticationApi.js';
import MyStore from '@/store/index.js';
import config from '@/config.js';
export default {
  data() {
    return {
      isChecked: true,
      formData: {
        name: '',
        idCard: '',
        area: ''
      },
      arr: [],
      idCard_img: {
        imgUrl: '',
        front: '',
        opposite: ''
      },
      area_id: '',
      token: '',
      range: [],
      userInfo: '',
      rules: {
        // 对name字段进行必填验证
        name: {
          // name 字段的校验规则
          rules: [
            // 校验 name 不能为空
            {
              required: true,
              errorMessage: '请填写姓名'
            }
          ]
        },
        idCard: {
          rules: [
            {
              required: true,
              errorMessage: '请填写身份证号'
            }
          ]
        },
        area: {
          rules: [
            // 校验 name 不能为空
            {
              required: true,
              errorMessage: '请选择区域'
            }
          ]
        }
      }
    };
  },
  methods: {
    isConfirmFn() {
      this.isChecked = !this.isChecked;
    },
    updataFile(e, m) {
      let baseUrl = `${config.baseURL}/img/save`;
      let url = '/facePhoto';
      // 上传图片
      console.log('上传图片！');
      if (!m) {
        console.log('证件照');
      } else if (m === 1) {
        url = '/idFront';
        console.log('正面');
      } else {
        url = '/idBack';
        console.log('反面');
      }
      let file = e.tempFiles[0].file; //拿到上传的file

      // uni.chooseImage({
      // success: (e) => {
      const tempFilePaths = e.tempFilePaths;
      uni.showLoading({
        title: '上传中'
      });
      uni.uploadFile({
        url: baseUrl + url,
        filePath: tempFilePaths[0],
        header: {
          token: this.token
        },
        name: 'file',
        formData: {
          type: Object,
          default() {
            return {};
          }
        },
        // file: {
        //   formData
        // },
        success: res => {
          console.log(res);
          uni.showToast({
            title: '上传成功'
          });
        },
        fail: err => {
          console.log(err);
        }
      });
    },
    change(v) {
      console.log('>>', v);
      // this.area_id = v;
    },
    isConfirm(e) {
      console.log(e);
    },
    async getAllArea() {
      const { data } = await getAllAreaAPI();
      this.range = data.data.map(i => {
        return { value: i.id, text: i.name };
      });
      console.log(this.range);
    },
    async submit() {
      let obj = {};
      console.log('idddd', this.userInfo);
      if (!this.isChecked) {
        uni.showToast({
          title: '请勾选同意',
          icon: 'error'
        });
        return;
      }
      try {
        const res = await this.$refs.form.validate();
        obj = {
          id: this.userInfo.user.id,
          username: this.userInfo.username,
          idName: res.name,
          idNumber: res.idCard,
          districtId: res.area
        };
        console.log('采集信息完毕', obj);
        console.log('发请求！');
        try {
          const res1 = await auditSubAPI(obj);
          this.formData = {};
          this.isChecked = false;
          this.idCard_img = {};
          uni.showToast({
            title: res1.data.message,
            icon: 'success'
          });
        } catch (e) {
          console.log(e);
        }
      } catch (e) {
        //TODO handle the exception
        console.log('表单错误信息', e);
      }
    },
    init() {
      this.getAllArea();
    }
  },
  onLoad: function () {
    this.init();
    this.userInfo = uni.getStorageSync('userData');
    console.log('user', this.userInfo);
    this.token = uni.getStorageSync('token');
  }
};
</script>

<style lang="scss">
.authentication_container {
  background-color: #333333;
  padding-bottom: 200rpx;

  ::v-deep .form {
    padding: 20rpx;

    .uni-forms-item {
      padding: 0 16rpx;
      background: #4f4f4f;
      border-radius: 5rpx;

      .uni-forms-item__label {
        color: #ca9623;
      }

      .uni-input-input {
        color: #fff;
      }

      .uni-easyinput__content {
        background-color: #4f4f4f !important;
      }

      .uni-select {
        border: unset;

        .uni-select__input-placeholder {
          color: #ca9623;
        }

        .uni-select__input-text {
          color: #fff;
        }
      }
    }
  }

  .save_id_img {
    background-color: #4f4f4f;
    border-radius: 10rpx;
    padding: 6rpx 0rpx;
    padding-bottom: 100rpx;

    .txt {
      color: #ca9623;
      font-weight: 600;
      padding-left: 6px;
    }

    .item {
      display: flex;
      flex-direction: column;
      padding: 10rpx 0rpx;
      margin-top: 20rpx;

      .title {
        color: #fff;
        font-size: 24rpx;
        padding-left: 50rpx;
        padding-bottom: 6rpx;
      }

      ::v-deep .img_1 {
        width: 100%;
        display: flex;

        .file-picker__box {
          margin: 0 auto;
          width: 80% !important;
          height: 200rpx;
          border-radius: 20rpx;
        }
      }
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 120rpx;
    background-color: #4f4f4f;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 100rpx;
    font-size: 14px;
    color: #fff;
    margin-top: 300rpx;

    ::v-deep .uni-checkbox-input {
      background-color: #b75524;
    }

    // ::v-deep .uni-checkbox-input:hover {
    //   background-color: #ff5c0a !important;
    // }
    text {
      color: #ca9623;
    }

    .agreement {
      font-size: 12rpx;
      color: #b75524;
    }

    .btn {
      width: 120rpx;
      border-radius: 10rpx;
      line-height: 50rpx;
      text-align: center;
      color: #fff;
      padding: 5rpx 7rpx;
      height: 50rpx;
      background-color: #ffb612;
      font-size: 24rpx;
    }

    .checkbox-3 {}
  }
}</style>
